<template>
  <div class="success-wrapper-style">
    <div class="flex-center">
      <van-image
        width="80"
        height="80"
        :src="`${staticPath}/icon_chengong@2x.png`"
      />
      <p>预约成功</p>
    </div>
      <div class="panel-flex">
        <div class="innner">
              <p class="name">{{ $route.query.name }}</p>
              <p>联系电话：{{ $route.query.tel }}</p>
              <p>证件号码： {{ $route.query.id_number | formatidcard }}</p>
            </div>
      </div>

    <div class="btn-wrapper">
      <van-button color="#4ECE40" block @click="handleRediector">返回首页</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      staticPath: process.env.VUE_APP_STATIC_PATH,
    };
  },

  components: {},

  computed: {},

  methods: {
    handleRediector() {
      this.$router.replace({
        path: "/home/index",
      });
    },
  },
};
</script>
<style lang='less'>
.success-wrapper-style{
  height: 100%;
  background: #f5f5f5;
  min-height: 100%;
  padding: 15px;
  .flex-center{
    display: flex;
    justify-content: center;
    padding: 30px 0;
    flex-direction: column;
    font-size: 36px;
    justify-content: center;
    align-items: center;
    p{
      color: #000;
      margin-top: 20px;
    }
  }
  .panel-flex{
    padding: 15px 0;
    .innner{
      border-radius: 10px;
      background: #fff;
      padding: 0 10px;
      p{
        padding: 12px 0;
        text-align: left;
      }
    }
  }
  .name {
    font-size: 18px;
    color: #000;
    margin-top: 20px;
    text-align: center;
  }
  p {
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .btn-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
}
</style>